<template>
  <div id="userAdd">
    <van-nav-bar title="添加用户" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="age"
        type="number"
        name="age"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="生日"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirmBirth" />
      <van-field
        readonly
        clickable
        name="type"
        :value="type.text"
        label="选择器"
        placeholder="点击选择职业"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirmType"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" :after-read="afterRead" multiple/>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
      birthday: "",
      showCalendar: false,
      uploader: [],
      type: '',
      icon:'',
      columns: [
        {id:1,text:'学生'},
        {id:2,text:'老师'},
        {id:3,text:'工人'}
        ],
      showPicker: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async onSubmit(values) {
      const userList={
        name:this.name,
        age:this.age,
        birthday:this.birthday,
        type:this.type.id,
        icon:this.icon
      }
      const {data:res}=await this.$http.post(this.HOST+'/user/adduser',userList)
      if(res.code==200){
        this.$toast.success('添加用户成功');
        this.$router.push('/user')
      }
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirmBirth(date) {
      this.showCalendar = false;
      this.birthday = this.formatDate(date);
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let param = new FormData();
      param.append("file", file.file);
      const { data: res } = await this.$http.post(
        this.HOST + "/uploadImg",
        param,
        {
          headers: {
            // 默认提交的类型
            // "content-type": "application/json"
            // 复杂的表单数据(只要上传文件，就必须是下面的类型)
            "content-type": "multipart/form-data",
          },
        }
      );

      this.icon=res.data.icon
      //   const {data:res}=await this.$http.post("/uploadImg",file)
      //   console.log(res)
    },
    onConfirmType(type){
      this.type = type;
      this.showPicker = false;
    }
  },
};
</script>

<style>
</style>